<extend name='Public/demo' />

<block name='contents'>
	<div class="row">

		<aside class="profile-nav col-lg-12" >
		
			<h3 style="text-align:center">照片管理(单击删除图片)</h3>
			<div class="row" id="out_div">
				<ul class="col-sm-6 col-md-3">		
				</ul>
				<ul class="col-sm-6 col-md-3">	
				</ul>
				<ul class="col-sm-6 col-md-3">
				</ul>
				<ul class="col-sm-6 col-md-3">
				</ul>	
			</div>
			<div style="text-align:center">
				<div class="row" style="text-align:center;cursor:pointer;display:none" id="more">查看更多</div>
				<div class="row" style="text-align:center;cursor:pointer;display:none" id="nomore">没有更多</div>
			</div>
		</aside>
	</div>
	<script>
		$(function(){
			// 初始化控制加载页数
			var p = 0;
			// 初始化统计删除条目个数
			var s = 0;
			// 定义发送ajax状态, false为没有正在发送
			var isLoading = false;

			requestNews(0);
			requestNews(1);
			requestNews(2);
			requestNews(3);
			/**
			 * [requestNews 发送ajax请求后台news数据]
			 *  后台如果有返回数据将插入图片
			 */
			function requestNews(index){

				// 查看更多信息的一个阀值判断
				if (p>=12) {
					isLoading = true;
					$('#more').css({"display":'inline-block'})
					return false;
				};

				isLoading = true;
				$.post('ajaxphoto', {},function(data){
					if (data) {
						for (var i = 0; i < data.length; i++) {
							console.log(data[i]['photos_id'])
							var odiv = $('<div  style="margin-top:20px;" pid="'+data[i]['photos_id']+'" class="pdiv"><div class="thumbnail"><img src="'+data[i]['photos_path']+'" maxwidth="200px"></div></div>');
							$('#out_div>ul:eq('+index+')').append(odiv);
						};

						// 成功发送ajax自增, 控制发送ajax次数
						p++;
						isLoading = false;	
					}else{
						$('#nomore').css('display','inline-block');
						$('#more').css('display','none');
						isLoading = true;	
					};
				},'json')
			}

			// 点击加载更多按钮, 发送ajax
			$('#more').on('click', function(){
				$(this).css({"display":'none'});
				p = 0;
				isLoading = false;

				requestNews(0);
				requestNews(1);
				requestNews(2);
				requestNews(3);
			})

			// 页面滚动发送ajax
			$(window).scroll(function(){
				if (isLoading) {return;};
				var ul0 = $('#out_div>ul:eq(0)').innerHeight();
				var ul1 = $('#out_div>ul:eq(1)').innerHeight();
				var ul2 = $('#out_div>ul:eq(2)').innerHeight();
				var ul3 = $('#out_div>ul:eq(3)').innerHeight();
				var m = [ul0,ul1,ul2,ul3];
				var sH = Math.min(ul0,ul1,ul2,ul3);
				var ind = [];
				for (var i = 0; i < m.length; i++) {
					if (m[i]==sH) {
						ind.push(i);
					};
				};

				var sT = $(window).scrollTop();
				var cH = $(window).height();

				if (sH<=sT+cH+20) {
					for (var i = 0; i < ind.length; i++) {
						
						requestNews(ind[i]);
					};
				};
			})

			// 点击加载更多按钮, 发送ajax
			$('.pdiv').live('click', function(){
				$(this).remove()
				var ul0 = $('#out_div>ul:eq(0)').innerHeight();
				var ul1 = $('#out_div>ul:eq(1)').innerHeight();
				var ul2 = $('#out_div>ul:eq(2)').innerHeight();
				var ul3 = $('#out_div>ul:eq(3)').innerHeight();
				var m = [ul0,ul1,ul2,ul3];
				var sH = Math.min(ul0,ul1,ul2,ul3);
				var ind = [];
				for (var i = 0; i < m.length; i++) {
					if (m[i]==sH) {
						ind.push(i);
					};
				};

				var sT = $(window).scrollTop();
				var cH = $(window).height();

				if (sH<=sT+cH+20) {
					for (var i = 0; i < ind.length; i++) {
						
						requestNews(ind[i]);
					};
					// $('#nomore').css('display','none');
				};
			})
		});
	</script>
</block>